A Frontend Developer
Turning design and ideas to code
ReadMe
Hello there? This is Peter Muthama , a self-taught Frontend Developer from Nairobi, Kenya. I developed my first webpage in 2016 which was a WordPress site where I used to post some bit of poetry. But it didn't work out as I wanted, so I did away with it. But since I still had that passion of working and interacting with computers, I decided to give it a try once more. And so far, I'm loving it. My end goal is to become a React/Nodejs Developer, and I'm determined to get there. That said, I'm open to opportunities that will help me grow and become the developer of my dreams. 😎
Skill
~ Projects ~
Projects are arranged in ascending order.
IdeaTrac
Description
Welcome to IdeaTrac 💡, a React TypeScript note project! IdeaTrac offers several features that enhance your note-taking experience. Firstly, it allows you to create and manage tags for your notes. This feature enables you to categorize and organize your notes efficiently.Additionally, IdeaTrac is equipped with Markdown support. Markdown is a lightweight markup language that enables easy formatting of text. With Markdown, you can add headings, emphasize text, create lists, and much more, making your notes more visually appealing and organized.Moreover, IdeaTrac incorporates Bootstrap for its styling. Bootstrap is a popular CSS framework that offers a wide range of pre-designed components and styles. By leveraging Bootstrap, IdeaTrac ensures a responsive and visually appealing user interface.With all these features combined, IdeaTrac provides you with a powerful, easy-to-use, and customizable platform for all your note-taking needs.Happy note-taking! 📔😊
Problems Encountered
Building the IdeaTrac project was an exhilarating challenge! 💪💡 Despite being new to TypeScript standards, I was determined to overcome any obstacles in my way – and I did just that. With sheer diligence, I successfully actualized the project, surpassing my own expectations. 🚀🎉Embracing TypeScript presented a fantastic opportunity to enhance the project's flexibility and maintainability. Although it was initially unfamiliar, I quickly realized the numerous benefits it brought to the table. TypeScript's static typing proved invaluable in catching potential errors during development, resulting in more robust and reliable code. ✨🔍Moreover, TypeScript's strong integration with code editors provided an exceptional development experience. With enhanced code suggestions and intelligent auto-completions, I found myself working with greater efficiency and productivity. 💻⚡️While the learning curve may have posed some challenges, the effort invested in mastering TypeScript's standards has undoubtedly paid off. It's exciting to have expanded my skillset and embraced industry best practices to create a more professional and sophisticated project. 📚💪 Overall, the journey of building IdeaTrac with TypeScript was one of growth, resilience, and accomplishment. I am proud of the progress made and excited for the possibilities it opens up for future projects. 🌟🚀. Here is the link 👇
AnonJot
Description
Welcome to Anon Jot, a unique MERN Stack project that allows you to share notes, thoughts, and ideas anonymously with ease! 📝💭 This web app provides a user-friendly experience, eliminating the need to sign in to create a new note. Rest assured, your data remains private, making Anon Jot a safe and enjoyable platform to express yourself. 😊
Problems Encountered
🤔 Developing AnonJot presented some exciting challenges, especially since I had to build both the backend and frontend from scratch. The most significant hurdle I faced was connecting the APIs, but with persistence and the help of various documentation and community support, I successfully overcame this obstacle. Now, the project is fully functional and ready for you to use! 💪. Here is the link 👇
Twiga-Soko
Description
🦒 Welcome to the Twiga Foods Soko Yetu Landing Page Clone project! This is a simple React project where I aimed to practice my understanding of React fundamentals, including importing components, libraries, and styles. The project consists of a carousel with different background images and containers in each slide, showcasing the benefits of Soko Yetu.
Link to the original website 🕸
Problems Encountered
During the development of this project, I encountered a few challenges 💪. The main challenge was to replicate the responsive background images used in the original Soko Yetu landing page. Initially, I attempted to import each image and store them in a component, using React hooks useState and useEffect along with windows.innerWidth to conditionally render the appropriate image based on the screen resolution. However, this approach caused CSS conflicts and issues.
To overcome this challenge, I decided to use the CSS background-image property for each slider and define their responsiveness using @media queries. This approach allowed me to achieve the desired results without compromising the stability of the CSS.
NTTI Redesign
Description
🌍 Welcome to the Nairobi TTI Website Redesign project! This project aims to improve the structure and layout of the Nairobi Technical Training Institute (TTI) website. As a former student of Nairobi TTI, I noticed that the website's design was messy and had several gaps. In an effort to enhance the user experience, I decided to apply my knowledge and give it a fresh, modern look.
Link to the original website 🕸
Problems Encountered
During the development of this project, I encountered a specific challenge related to the navigation menu. The requirement was to have two navigation menus, with the top navigation disappearing as the user starts scrolling. While Bootstrap provides an easy way to achieve this with Affix, my project did not utilize Bootstrap. However, I managed to find an old jQuery code snippet that I converted to Vanilla JavaScript. By integrating this solution into my project, I successfully implemented the desired behavior. It's yet to be perfect but here is the result 👇
Bonsai.com Pricing Page Clone
Description
🌱 This project aims to replicate the pricing page of Bonsai, a popular online platform. The goal is to gain hands-on experience with Toggle Switches, Accordions, and Dropdown menus, and understand how they function within a web application. The primary focus is to recreate the landing page, while continuously maintaining and improving it to achieve a comprehensive clone of Bonsai's pricing page.
Link to the original website 🕸
Problems Encountered
Creating this project presented several challenges 💪, especially for a first-time endeavor with Toggle Switches, Accordions, and Dropdowns, as well as implementing JavaScript interactivity. The pricing layout required careful structuring, and making the page responsive was also a significant hurdle. Thankfully, I was able to overcome these challenges with the support of online resources and problem-solving skills.
Credit to Frontend Practice